<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../public/css/bootstrap.min.css">
    <style>
        .error_c{
            padding-top: 5px;
            color: #ff5100;
            padding: 0px;
            margin-top: 2px;
        }
        .margin{
          padding: 0px;
        }
    </style>
</head>
<body>
    <div class="center-block">
        <form class="text-center col-md-6 col-md-offset-3">
            <h1 class="text-center col-sm-12">用户登录</h1>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
                </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">登录</button>
                <div class="col-sm-12 protocol text-right margin"><a href="http://localhost:3000/register">如果您还没有账号?请注册</a></div>
          </div>
        </form>
    </div>
    <script src="../public/js/jquery.js"></script>
    <script src="../public/js/bootstrap.min.js"></script>
    <script>
        function getStr(x){
            return `<span class='error_c col-sm-12 text-left'><i class="glyphicon glyphicon-remove-circle"></i>
                ${x}
            </span>`
        }
        $('button').click(()=>{
            let user=$('#exampleInputEmail1').val()
            let pass=$('#exampleInputPassword1').val()
            $('#exampleInputEmail1').next().remove();
            $('#exampleInputPassword1').next().remove();
            if(user==''){ 
                $('#exampleInputEmail1').parent().append(getStr('请输入用户名'))
            }
            if(pass==''){
                $('#exampleInputPassword1').parent().append(getStr('请输入错误'))}
            if(user!=''&&pass!=''){
                $.ajax({
                    url:"http://localhost:3000/login",
                    type:"post",
                    dataType:"json",
                    data:{
                        username:user,
                        password:pass,
                        // mytime:mydate
                    },
                    error: function(){console.log("连接失败")},
                    success: (res)=>{
                        if(res.status=="账号错误"){
                            $('#exampleInputEmail1').parent().append(getStr('用户名错误'))
                        }else if(res.status=='密码错误'){
                            $('#exampleInputPassword1').parent().append(getStr('密码错误'))
                        }else if(res.status=="登录成功"){
                            console.log('登录成功')
                            location.href='http://localhost:3000/'
                        }
                    }
              }) 
            }
            return false
        })  
    </script>
</body>
</html>
